=<template>

         <div >
            <h3 class="table-name"> 综合应急预案要素评审表</h3>
             <div class="el-table1">
                  <div class='firstTd'>
                 评审项目
              </div>
            <el-table
                  :data="data1"
                  :span-method="objectSpanMethod1"
                  border
                  style="width: 100%; ">
                    <el-table-column
                    prop="reviewItemOne"
                    label="评审项目"
                    width="110">
                     <template slot-scope="scope">
                       
                        <p  :style='scope.row.reviewItemOne.indexOf("注：") ==-1? "text-align:center":"text-align:left"'>{{scope.row.reviewItemOne}}</p>
                      </template>
                  </el-table-column>
                  <el-table-column
                    prop="reviewItemTwo"
                    label="评审项目"
                     align='center'
                    width="110">
                  </el-table-column>
                  <el-table-column
                    prop="reviewContent"
                    label="评审内容及要求">
                     <template slot-scope="scope">
                       <div  v-if='scope.row.flag==0' >
                  <img v-for='(item,index) in scope.row.reviewContent ' 
                style="width:120px;height:60px;padding:10px;float:left;" 
                :src="item" :key='index' alt="">
              </div> <p v-else style="text-align:left;">{{scope.row.reviewContent}}</p>
                      </template>
                  </el-table-column>
                  <el-table-column
        label="评审意见"
         align="center"
        >
          <el-table-column label="符合" width="80" prop="reviewMethod" align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag' :src="scope.row.result==1?'../../../static/images/r1.png':'../../../static/images/r2.png'" class="radioImg">
                    <img  v-else @click='scope.row.result="1"' :src="scope.row.result==1?'../../../static/images/r1.png':'../../../static/images/r2.png'" class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==1?'√':''}}
                  </template>
              </template>
          </el-table-column>
          <el-table-column label="基本符合" width="80" prop="reviewMethod"  align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag'  :src="scope.row.result==2?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                    <img  v-else  @click='scope.row.result="2"' :src="scope.row.result==2?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==2?'√':''}}
                  </template>
             </template>
          </el-table-column>
          <el-table-column label="不符合" width="80" prop="reviewMethod"  align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag'   :src="scope.row.result==3?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                    <img  v-else  @click='scope.row.result="3"' :src="scope.row.result==3?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==3?'√':''}}
                  </template>
              </template>
          </el-table-column>
      </el-table-column>
                </el-table>
                </div>
            <h3 class="table-name"> 专项应急预案要素评审表</h3>
            <div class="el-table2">
              <div class='firstTd'>
                 评审项目
              </div>
            <el-table
                  :data="data2"
                  :span-method="objectSpanMethod2"
                  border
                  style="width: 100%; ">
               
                   <el-table-column
                    prop="reviewItemOne"
                    label="评审项目"
                    width="110">
                     <template slot-scope="scope">
                       
                        <p  :style='scope.row.reviewItemOne.indexOf("注：") ==-1? "text-align:center":"text-align:left"'>{{scope.row.reviewItemOne}}</p>
                      </template>
                  </el-table-column>

                  <el-table-column
                    prop="reviewItemTwo"
                    label="评审项目"
                    text-align='left'
                    width="110">
                  </el-table-column>
                  <el-table-column
                    prop="reviewContent"
                    label="评审内容及要求">
                     <template slot-scope="scope">
                       <div  v-if='scope.row.flag==0' >
                  <img v-for='(item,index) in scope.row.reviewContent ' 
                style="width:120px;height:60px;padding:10px;float:left;" 
                :src="item" :key='index' alt="">
              </div> <p v-else style="text-align:left;">{{scope.row.reviewContent}}</p>
                      </template>
                  </el-table-column>
                  <el-table-column
        label="评审意见"
         align="center"
        >
          <el-table-column label="符合" width="80" prop="reviewMethod" align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag' :src="scope.row.result==1?'../../../static/images/r1.png':'../../../static/images/r2.png'" class="radioImg">
                    <img  v-else @click='scope.row.result="1"' :src="scope.row.result==1?'../../../static/images/r1.png':'../../../static/images/r2.png'" class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==1?'√':''}}
                  </template>
              </template>
          </el-table-column>
          <el-table-column label="基本符合" width="80" prop="reviewMethod"  align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag'  :src="scope.row.result==2?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                    <img  v-else  @click='scope.row.result="2"' :src="scope.row.result==2?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==2?'√':''}}
                  </template>
             </template>
          </el-table-column>
          <el-table-column label="不符合" width="80" prop="reviewMethod"  align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag'   :src="scope.row.result==3?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                    <img  v-else  @click='scope.row.result="3"' :src="scope.row.result==3?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==3?'√':''}}
                  </template>
              </template>
          </el-table-column>
      </el-table-column>
                </el-table>
                </div>
                <h3 class="table-name"> 现场处置方案要素评审表</h3>
                <div class="el-table3">
                  <div class='firstTd'>
                 评审项目
              </div>
            <el-table
                  :data="data3"
                  :span-method="objectSpanMethod3"
                  border
                  style="width: 100%; ">
                  <el-table-column
                    prop="reviewItemOne"
                    label="评审项目"
                    width="110">
                    
                 <template slot-scope="scope">
                       
                        <p  :style='scope.row.reviewItemOne.indexOf("注：") ==-1? "text-align:center":"text-align:left"'>{{scope.row.reviewItemOne}}</p>
                      </template>
                  </el-table-column>

                  <el-table-column
                    prop="reviewItemTwo"
                    label="评审项目"
                    text-align='left'
                    width="110">
                  </el-table-column>
                  <el-table-column
                    prop="reviewContent"
                    label="评审内容及要求">
                     <template slot-scope="scope">
                        <div  v-if='scope.row.flag==0' >
                  <img v-for='(item,index) in scope.row.reviewContent ' 
                style="width:120px;height:60px;padding:10px;float:left;" 
                :src="item" :key='index' alt="">
              </div><p v-else style="text-align:left;">{{scope.row.reviewContent}}</p>
                      </template>
                  </el-table-column>
                  <el-table-column
        label="评审意见"
         align="center"
        >
          <el-table-column label="符合" width="80" prop="reviewMethod" align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag' :src="scope.row.result==1?'../../../static/images/r1.png':'../../../static/images/r2.png'" class="radioImg">
                    <img  v-else @click='scope.row.result="1"' :src="scope.row.result==1?'../../../static/images/r1.png':'../../../static/images/r2.png'" class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==1?'√':''}}
                  </template>
              </template>
          </el-table-column>
          <el-table-column label="基本符合" width="80" prop="reviewMethod"  align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag'  :src="scope.row.result==2?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                    <img  v-else  @click='scope.row.result="2"' :src="scope.row.result==2?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==2?'√':''}}
                  </template>
             </template>
          </el-table-column>
          <el-table-column label="不符合" width="80" prop="reviewMethod"  align="center">
              <template slot-scope="scope">
                  <template v-if="!falg1">
                    <img v-if='!flag'   :src="scope.row.result==3?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                    <img  v-else  @click='scope.row.result="3"' :src="scope.row.result==3?'../../../static/images/r1.png':'../../../static/images/r2.png'"  class="radioImg">
                  </template>
                  <template v-else>
                       {{scope.row.result==3?'√':''}}
                  </template>
              </template>
          </el-table-column>
      </el-table-column>
                </el-table>
            </div>
            </div>
</template>

<script>
export default {
  props:['data1','data2','data3'],
  data(){
    return{
      flag:true,
      falg1:false
    }
  },
    mounted(){
  
    var str = window.location.href
    if(str.indexOf('assessedAll2')!=-1  || str.indexOf('checkAssessed2')!=-1 ){
      this.flag=false
    }else{
      this.flag=true
      if(str.indexOf('onlineAssess2') !=-1){
          this.falg1 = true
      }else{
          this.falg1 = false
      }
    }
  },
  methods:{
    countTimes(data) {
        return data.reduce(function(obj, name) {
            if (name.reviewItemOne in obj) {
                obj[name.reviewItemOne]++;
            } else {
                obj[name.reviewItemOne] = 1;
            }
            return obj;
        }, {});
    },
   objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
       var arr = [],arr2=[],obj2=[],k=0
       var obj =this.countTimes(this.data1)
       for(var i in obj){
          arr.push(obj[i])
       }
         arr.map((item,index)=>{
            obj2.push({val:item,idx:k});
            k+=item
        })
        this.data1.map(function(item,index){
          arr2.push(0)
           obj2.map(item=>{
              if(item.idx == index){
                arr2[item.idx]=item.val
              }
           })
          
        })
    if (columnIndex === 0) {
      if (rowIndex  == 0) {
        return [ arr2[rowIndex],1]
      } else{
        if(rowIndex == 20){
          return [1,6]
        }else{
          if(!row.reviewItemTwo){
            return [1,2]
          }else{
            return [arr2[rowIndex],arr2[rowIndex] == 0 ? 0 : 1]
          }
      
        }
      }
    }
    if (columnIndex === 1) {
        if(!row.reviewItemTwo){
         return[2,0]

        }
    }
    if (columnIndex === 2 && rowIndex  === 21 ) {
        return [1,6];
    }
  },
   objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
       var arr = [],arr2=[],obj2=[],k=0
       var obj =this.countTimes(this.data2)
       for(var i in obj){
          arr.push(obj[i])
       }
         arr.map((item,index)=>{
            obj2.push({val:item,idx:k});
            k+=item
        })
        this.data2.map(function(item,index){
          arr2.push(0)
           obj2.map(item=>{
              if(item.idx == index){
                arr2[item.idx]=item.val
              }
           })
          
        })
       if (columnIndex === 0) {
      if (rowIndex  == 0) {
        return [ 1,2]
      } else{
        if(rowIndex == 10){
          return [1,6]
        }else{
          if(!row.reviewItemTwo){
            return [1,2]
          }else{
            return [arr2[rowIndex],arr2[rowIndex] == 0 ? 0 : 1]
          }
      
        }
      }
    }
    if (columnIndex === 1) {
        if(!row.reviewItemTwo){
         return[2,0]

        }
    }
    if (columnIndex === 2 && rowIndex  ===11 ) {
        return [1,6];
    }
  },
    objectSpanMethod3({ row, column, rowIndex, columnIndex }) {
       var arr = [],arr2=[],obj2=[],k=0
       var obj =this.countTimes(this.data3)
       for(var i in obj){
          arr.push(obj[i])
       }
         arr.map((item,index)=>{
            obj2.push({val:item,idx:k});
            k+=item
        })
        this.data3.map(function(item,index){
          arr2.push(0)
           obj2.map(item=>{
              if(item.idx == index){
                arr2[item.idx]=item.val
              }
           })
          
        })
       if (columnIndex === 0) {
      if (rowIndex  == 0) {
        return [ 1,2]
      } else{
        if(rowIndex == 4){
          return [1,6]
        }else{
          if(!row.reviewItemTwo){
            return [1,2]
          }else{
            return [arr2[rowIndex],arr2[rowIndex] == 0 ? 0 : 1]
          }
      
        }
      }
    }
    if (columnIndex === 1) {
        if(!row.reviewItemTwo){
         return[2,0]

        }
    }
    if (columnIndex === 2 && rowIndex  === 5 ) {
        return [1,6];
    }
  },
  }
}
</script>
<style>

     .radioImg{
    width:25px;
    height:25px;
  }
    .el-table thead.is-group th{
          color: rgb(51, 51, 51);
    font-weight: bold;
    }
	.table-name{
        margin:15px 0;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        color:#333333;
    }
  .firstTd{
                color: rgb(51, 51, 51);
                font-weight: bold;
                height: 78px;
                width: 200px;
                line-height: 78px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 5px;
                top: 2px;
                background: rgb(245, 247, 250);      
          }
           .el-table1 {
            position: relative;
          }
          .el-table2 {
            position: relative;
          }
           .el-table3 {
            position: relative;
          }
</style>